<template>
    <div class="app-container">
        <el-form :model="formInline" label-width="90px" class="formInline">
            <div class="table-title">查询列表</div> 
            <el-row :gutter="20">
                <el-col :span="8">             
                    <el-form-item label="所属分类：">
                        <el-select v-model="formInline.status" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="标题：">
                        <el-input v-model="formInline.title" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>               
                <el-col :span="8">
                    <el-form-item label="发布日期：">                    
                        <el-date-picker v-model="formInline.date" type="daterange" placeholder="选择日期范围" style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>                
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">             
                    <el-form-item label="发布部门：">
                        <el-select v-model="formInline.depart" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="top-line">
                <el-col :span="4" :offset="20"> 
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    <el-button  class="top-btn" >清空</el-button>
                </el-col>
            </el-row>
        </el-form>

        <div class="table-box">
            <div class="table-title">查询列表</div>
            <el-table :data="historyApply" stripe border style="width: 100%">
                <el-table-column prop="date" align="center" label="申请日期" width="180">
                </el-table-column>

                <el-table-column label="标题" align="center" width="180">
                    <template scope="scope">
                         <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="address" label="目的地">   
                </el-table-column>

                <el-table-column align="center" label="用车时间">
                    <template scope="scope">
                        <p>{{scope.row.during.from}}</p>
                        <p>{{scope.row.during.to}}</p>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="状态">
                    <template scope="scope">
                        <el-tag>{{ scope.row.status }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template scope="scope">
                        <el-button size="small" :type="btn.type == 'check' ? 'primary' : 'result'" v-for="btn in scope.row.operation">{{ btn.name }}</el-button>
                    </template>
                </el-table-column>               
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[5, 10, 20]"
                    :page-size="listQuery.limit"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { searchHistoryApply } from 'api/carApply';
export default {
    components: {  },
    data() {
        return {
            options: [{
                value: '',
                label: '全部'
            },{
                value: '1',
                label: '申请中'
            }, {
                value: '2',
                label: '已同意'
            }, {
                value: '3',
                label: '已驳回'
            }, {
                value: '4',
                label: '已取消'
            }],
            options2: [{
                value: '',
                label: '全部'
            },{
                value: '1',
                label: '校长室(党支部)'
            }, {
                value: '2',
                label: '办公室'
            }, {
                value: '3',
                label: '信息中心'
            }],
            formInline: {//form表单数据
                status: '',
                title: '',
                date:'',
                depart:'',
            },
            historyApply: [],
            dataNum:1,//表格1显示条数，初始为1
            listQuery: {//分页
                page: 1,
                limit: 5,
                total:0
            },
        }
    },
    created() {
        this.searchFetchData();
    },
    methods: {
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        searchFetchData(){
            let status = this.formInline.status == '全部'?'':this.formInline.status;
            searchHistoryApply(this.formInline.title,this.listQuery.page-1, this.listQuery.limit,status).then(response => {  
                this.historyApply = response.data.list;
                this.listQuery.total =  response.data.pagination.total;
            });
        },
        onSubmit() {//表单查询
            this.searchFetchData();
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor:#fff;
    .app-levelbar {
        height: 35px;
    }
    .table-title{
        color: #333;
        margin-bottom: 15px;
    }
    .formInline {
        padding: 20px 20px 0; 
        background: $bgcolor;
        .top-line{
            padding:15px 0;
            border-top:1px solid #dedede;
            text-align: right;
        }
    }
    .table-box{
        margin-top:20px;
        padding: 20px 10px;
        background: $bgcolor;
    }
    
}

</style>

